<template>
  <div class="activity">
    <div class="navbanner lunbo" >
			  <img src="../../static/images/read-book.jpg" class=""/>
        <div class="tour-nab">           
            <ul class="nav nav-pills recruit-ul">
                <li class="active-underline">
                    <router-link to="/activity">
                        <a href="javascript:void(0);">优秀作品</a>
                    </router-link>
                </li>
                <li>
                    <router-link to="/activity/exactivity">
                        <a href="javascript:void(0);">精彩活动</a>
                    </router-link>
                </li>
                <li>
                    <router-link to="/activity/homeducate">
                        <a href="javascript:void(0);">家园共育</a>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>

  <div class="container">
      <h1 class="t_nav">
        <p class="n1">活动风采</p>
         <div class="rt">当前位置：
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/activity' }">活动风采</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/activity' }">优秀作品</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
      </h1>
    <div class="navbanner clearfix" style="margin-top: 0;">
      <div class="content">
        <div v-for="(row,index) in sliceList(worksList,worksList.length)" :key="index" >
          <div  class="works-list"  v-for="(temp,i) in row" :key="i">
            <img v-if="temp.imgSrc" :src="preUrl+temp.imgSrc" alt  class="card-img"> 
            <div class="card-body">
              <span class="card-head" v-highlight  v-html="temp.content" ></span>
              <span class="card-detail">作者@by <span>{{temp.title}}</span></span>
              <span class="card-foot"><i class="el-icon-view"></i>3.2w</span>
            </div>
          </div>
        </div>
      </div>  
    </div>
    
    </div>
  </div>
</template>

<script>
import request from "../utils/request";

export default {
  data () {
    return {
      worksList:[],
      url:{
        worksList:"/sunNews/list",
      },
      preUrl: "http://localhost:8080/jeecg-boot/sys/common/static/",
    }
  },
  components: {
    // 注册组件
  },
  mounted () { },
  created () {
    this.getWorksList();
  },
  computed: {
    //实现每n项一分组换行
    sliceList() {
      return function (data,count) {
        if (data != undefined) {
          let index = 0;
          let arrTemp = [];
          for (let i = 0; i < data.length; i++) {
            index = parseInt(i / count);
            if (arrTemp.length <= index) {
              arrTemp.push([]);
            }
            arrTemp[index].push(data[i])
          }
          return arrTemp
        }
      }
    }
  },
  methods: {
    getWorksList(){
      request
        .get(this.url.worksList, {
          params: {
            // pageSize:6,
            category: 4,
          },
        })
        .then((res) => {
          if (res.data.success) {
            this.worksList = res.data.result.records;
            // console.log(this.worksList);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }, 
  },
}
</script>

<style>
.activity .navbanner .content{
  height: 800px;
  display: flex;
  justify-content: space-between;
}
.card-body:hover{
  color:#ff6633;
}
</style>
